<template>
  <div id="app">
    <!-- 全局加载状态 -->
    <AppLoading v-if="loading" />
    
    <!-- 导航栏 -->
    <NavBar v-if="showNavBar" />
    
    <!-- 主要内容区域 -->
    <main class="main-content">
      <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <keep-alive :include="cachedViews">
            <component :is="Component" />
          </keep-alive>
        </transition>
      </router-view>
    </main>
    
    <!-- 页脚 -->
    <AppFooter v-if="showFooter" />
    
    <!-- 移动端菜单遮罩 -->
    <div 
      v-if="showMobileMenu" 
      class="mobile-menu-overlay"
      @click="closeMobileMenu"
    ></div>
  </div>
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import NavBar from './components/NavBar.vue'
import Footer from './components/AppFooter.vue'
import Loading from './components/AppLoading.vue'

export default {
  name: 'App',
  components: {
    NavBar,
    AppFooter: Footer,
    AppLoading: Loading
  },
  setup() {
    const store = useStore()
    const route = useRoute()
    
    // 判断是否显示导航栏
    const showNavBar = computed(() => {
      const hiddenRoutes = ['Login', 'Register']
      return !hiddenRoutes.includes(route.name)
    })
    
    // 判断是否显示页脚
    const showFooter = computed(() => {
      const hiddenRoutes = ['Login', 'Register']
      return !hiddenRoutes.includes(route.name)
    })
    
    // 获取全局加载状态
    const isLoading = computed(() => store.state.isLoading)
    
    // 获取移动端菜单状态
    const showMobileMenu = computed(() => store.state.isMobileMenuOpen)
    
    // 需要缓存的视图
    const cachedViews = computed(() => ['ActivityList', 'MyActivities', 'UserProfile'])
    
    // 关闭移动端菜单
    const closeMobileMenu = () => {
      store.commit('setMobileMenuOpen', false)
    }
    
    return {
      showNavBar,
      showFooter,
      isLoading,
      showMobileMenu,
      cachedViews,
      closeMobileMenu
    }
  }
}
</script>

<style>
/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  background-color: #f5f5f5;
}

a {
  text-decoration: none;
  color: #333;
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
}

/* 过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 主内容区域样式 */
.main-content {
  min-height: calc(100vh - 140px);
  padding: 20px 0;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 移动端响应式 */
@media (max-width: 768px) {
  .main-content {
    padding: 0 15px;
  }
}

/* 移动端菜单遮罩 */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 90;
}
</style>
